<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script>
	$(document).ready(function(e) {

		//设置播放时间间隔
		$('#myCarousel').carousel({
			interval : 1200
		});
		//$('#myCarousel').carousel('cycle');

		//开始自动播放

		$('#startBtn').click(function(e) {
			$('#myCarousel').carousel('cycle');
		});
	});
</script>
<style type="text/css">
#div1 {
	position: relative;
	height: 411px;
	background: #f5f5f5;
	margin-top: 0px;
}

#div2 {
	position: absolute;
	background: white;
	width: 180px;
	height: 409px;
	border: 1px #ccc solid;
	left: 9%;
}

#div3 {
	position: absolute;
	width: 900px;
	height: 410px;
	left: 24%;
}

#tr1 {
	height: 37px;
	width: 200px;
}

#td1 {
	width: 200px;
}

#table1 tr:hover {
	background-color: #FA2846;
	
}

#img {
	height: 480px;
}
</style>

</head>

<body>
	<div id="div1">
		<div id="div2">
			<table id="table1">
				<tr id="tr1">
					<td align="center" style="background:#404040;color:white"><b>全部类别</b></td>
				</tr>
				<c:forEach items="${categoryList }" var="c" end="10">
					<tr id="tr1">
						<td id="td1" align="center"><a style="color:black"
							href="<%=request.getContextPath() %>/product/${c.id }/category"
							style="text-decoration: none;" target="viewByCategory">${c.name }</a></td>
					</tr>
				</c:forEach>
			</table>
		</div>
		<div class="container" id="div3">

			<!--轮播容器-->
			<div id="myCarousel" class="carousel slide">
				<!--轮播指针-->
				<ol class="carousel-indicators">
					<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
					<li data-target="#myCarousel" data-slide-to="1"></li>
					<li data-target="#myCarousel" data-slide-to="2"></li>
				</ol>
				<!--轮播项目-->
				<div class="carousel-inner">
					<div class="item active" id="img">
						<img src="img/01.jpg">
					</div>
					<div class="item" id="img">
						<img src="img/02.jpg">
					</div>
					<div class="item" id="img">
						<img src="img/03.jpg">
					</div>
				</div>
				<!--控制按钮-->
				<div class="text-center">
					<button id="startBtn" type="button" class="btn"
						style="display: none;">自动播放</button>
				</div>
			</div>

		</div>
	</div>
</body>

</html>